<template>
	<view>
		<top-navigation :isFix="false" bgColor="#fff">
			<template #center-slot>
				<view style="font-size: 28rpx;font-weight: 600;color:#000;">个人资料</view>
			</template>
		</top-navigation>
		<view class="data">
			<view class="cont" @tap="uploadisShow = true">
				<text>头像</text>
				<view class="updates">
					<!-- <image class="upload" src="@/static/images/logo.png" /> -->
					<image class="arrow" src="@/module/static/images/arrow.png" />
				</view>
			</view>
			<view class="cont" @tap="nickisShow = true">
				<text>昵称</text>
				<view class="updates">
					<text>昵称</text>
					<image class="arrow" src="@/module/static/images/arrow.png" />
				</view>
			</view>
			<view class="cont" @tap="nameisShow = true">
				<text>姓名</text>
				<view class="updates">
					<text>请输入姓名</text>
					<image class="arrow" src="@/module/static/images/arrow.png" />
				</view>
			</view>
			<picker mode="selector" :range="sexdata" range-key="value" @change="sexChang">
				<view class="cont">
					<text>性别</text>
					<view class="updates">
						<text>{{ sexValue >= 0 ? sexdata[sexValue].value : '请选择性别' }}</text>
						<image class="arrow" src="@/module/static/images/arrow.png" />
					</view>
				</view>
			</picker>
			<picker mode="date" :end="endDate" @change="birthDateChange">
				<view class="cont">
					<text>出生日期</text>
					<view class="updates">
						<text>{{birthdayValue || '请选择出生日期'}}</text>
						<image class="arrow" src="@/module/static/images/arrow.png" />
					</view>
				</view>
			</picker>
			<u-action-sheet :actions="uploaddata" :show="uploadisShow" cancelText="取消" round="12" @close="uploadisShow = false" @select="selcetUpload"></u-action-sheet>

			<u-action-sheet :show="nickisShow" round="12" :closeOnClickOverlay="true" @close="nickisShow = false">
				<slot>
					<view class="titles">
						<view>
							<!-- 仅占位 -->
						</view>
						<text>修改昵称</text>
						<image @tap="nickisShow = false" src="@/module/static/images/close.png" />
					</view>
					<input class="updname" type="text" placeholder="请输入昵称" placeholder-class="updnameple" />
					<view class="but">保存</view>
				</slot>
			</u-action-sheet>

			<u-action-sheet :show="nameisShow" round="12" :closeOnClickOverlay="true" @close="nameisShow = false">
				<slot>
					<view class="titles">
						<view>
							<!-- 仅占位 -->
						</view>
						<text>修改姓名</text>
						<image @tap="nameisShow = false" src="@/module/static/images/close.png" />
					</view>
					<input class="updname" type="text" placeholder="请输入姓名" placeholder-class="updnameple" />
					<view class="but">保存</view>
				</slot>
			</u-action-sheet>

		</view>
		<!-- 裁剪组件 -->
		<yq-avatar @upload="myUpload" ref="avatar"></yq-avatar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uploaddata: [{ //文件上传
						name: '相机',
						fontSize: '28rpx',
						key: 'camera'
					},
					{
						name: '相册',
						fontSize: '28rpx',
						key: 'album'
					},
				],
				sexdata: [{
					value: '男',
					key: 1
				}, {
					value: '女',
					key: 2
				}, ], //性别数据
				uploadisShow: false, //头像显示
				nickisShow: false, //昵称显示
				nameisShow: false, //姓名显示
				sexValue: -1,
				birthdayValue: '', // 出生日期信息
				endDate: '', //选择时间下限
			};
		},
		onLoad() {
			this.endDate = this.$moment().format('YYYY-MM-DD')
		},
		methods: {
			selcetUpload(e) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [e.key],
					success: r => {
						this.clk(r.tempFilePaths[0])
					}
				});
			},
			// 唤起裁剪组件
			clk(imgPath = null) {
				this.$refs.avatar.fChooseImg(undefined, {
					selWidth: '600upx',
					selHeight: '600upx',
					expWidth: '300upx',
					expHeight: '300upx',
					stretch: 'short',
					canRotate: false,
					imgPath: imgPath
				});
			},
			// 裁剪组件的回调
			myUpload(e) {
				console.log(e);
				uni.showLoading({
					title: '正在上传'
				});
				let uploadTask = uni.uploadFile({
					url: this.$getHost() + '/general/upload', //仅为示例，非真实的接口地址
					filePath: e.path,
					name: 'file',
					success: e => {
						uni.hideLoading();
						console.log(e)
					},
					fail: res => {
						this.$toast('图片上传失败！')
					}
				});
			},
			sexChang(e) {
				this.sexValue = e.detail.value
			},
			birthDateChange(e) {
				this.birthdayValue = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;

		.cont {
			height: 104rpx;
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;
			box-sizing: border-box;

			.updates {
				display: flex;
				align-items: center;

				text {
					font-weight: 400;
					color: #666666;
				}

				.upload {
					width: 64rpx;
					height: 64rpx;
				}

				.arrow {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.titles {
			padding: 40rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;

			view {
				width: 48rpx;
				height: 48rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.updname {
			width: 604rpx;
			height: 80rpx;
			margin: 0 auto;
			border: 1px solid #999;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #000;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.updnameple {
			color: #999;
		}

		.but {
			width: 604rpx;
			height: 84rpx;
			margin: 90rpx auto 60rpx auto;
			background-color: $uni-color-primary;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #F8F0F0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
